// 窗口大小 拆出来是为了更好的分离单独复用
import { useWindowSize } from '@vueuse/core';
export const { width: winWidth, height: winHeight } = useWindowSize();

// * 屏幕缩放适配（两边留白）
export const usePreviewFitScale = (width, height, scaleDom, callback) => {
	// * 画布尺寸（px）
	const baseWidth = width;
	const baseHeight = height;
	// * 默认缩放值
	const scale = {
		width: 1,
		height: 1
	};
	// * 需保持的比例
	const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
	watchEffect(() => {
		// 当前屏幕宽高比
		const currentRate = parseFloat((winWidth.value / winHeight.value).toFixed(5));
		if (scaleDom) {
			if (currentRate > baseProportion) {
				// 表示更宽
				scale.width = parseFloat(((winHeight.value * baseProportion) / baseWidth).toFixed(5));
				scale.height = parseFloat((winHeight.value / baseHeight).toFixed(5));
				scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`;
			} else {
				// 表示更高
				scale.height = parseFloat((winWidth.value / baseProportion / baseHeight).toFixed(5));
				scale.width = parseFloat((winWidth.value / baseWidth).toFixed(5));
				scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`;
			}
			if (callback) callback(scale);
		}
	});
};

// *  X轴撑满，Y轴滚动条
export const usePreviewScrollYScale = (width, height, scaleDom, callback) => {
	// * 画布尺寸（px）
	const baseWidth = width;
	const baseHeight = height;

	// * 默认缩放值
	const scale = {
		width: 1,
		height: 1
	};

	// * 需保持的比例
	const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

	watchEffect(() => {
		if (scaleDom) {
			scale.height = parseFloat((winWidth.value / baseProportion / baseHeight).toFixed(5));
			scale.width = parseFloat((winWidth.value / baseWidth).toFixed(5));
			scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`;
			if (callback) callback(scale);
		}
	});
};

// *  Y轴撑满，X轴滚动条
export const usePreviewScrollXScale = (width, height, scaleDom, callback) => {
	// * 画布尺寸（px）
	const baseWidth = width;
	const baseHeight = height;

	// * 默认缩放值
	const scale = {
		height: 1,
		width: 1
	};

	// * 需保持的比例
	const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

	watchEffect(() => {
		if (scaleDom) {
			scale.width = parseFloat(((winHeight.value * baseProportion) / baseWidth).toFixed(5));
			scale.height = parseFloat((winHeight.value / baseHeight).toFixed(5));
			scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`;
			if (callback) callback(scale);
		}
	});
};

// * 变形内容，宽高铺满
export const usePreviewFullScale = (width, height, scaleDom, callback) => {
	// * 默认缩放值
	const scale = {
		width: 1,
		height: 1
	};
	watchEffect(() => {
		if (scaleDom) {
			scale.width = parseFloat((winWidth.value / width).toFixed(5));
			scale.height = parseFloat((winHeight.value / height).toFixed(5));
			scaleDom.style.transform = `scale(${scale.width}, ${scale.height})`;
			if (callback) callback(scale);
		}
	});
};

export const useScale = ({ width, height, previewScaleType }, entityRef, previewRef) => {
	// 屏幕适配
	switch (previewScaleType) {
		case 'fit':
			usePreviewFitScale(width, height, previewRef.value);
			break;
		case 'scrollY':
			usePreviewScrollYScale(width, height, previewRef.value, (scale) => {
				const dom = entityRef.value;
				dom.style.width = `${width * scale.width}px`;
				dom.style.height = `${height * scale.height}px`;
			});
			break;
		case 'scrollX':
			usePreviewScrollXScale(width, height, previewRef.value, (scale) => {
				const dom = entityRef.value;
				dom.style.width = `${width * scale.width}px`;
				dom.style.height = `${height * scale.height}px`;
			});
			break;
		case 'full':
			usePreviewFullScale(width, height, previewRef.value);
			break;
	}
};
